<!--
 * @Descripttion:
 * @version:
 * @Author: ZhangXue
 * @Date: 2021-07-12 09:17:30
 * @LastEditors: ZhangXue
 * @LastEditTime: 2021-08-16 14:27:18
-->
<template>
  <div class="fd-home-body">
    <!-- 上面logo栏 开始 -->
    <div class="fd-header-box">
      <div class="fd-logo"><span>大数据分析系统</span></div>
      <!-- tab切换菜单栏 开始 -->
      <div class="fd-tab-box">
        <ul class="fd-tab-list">
          <li
            :class="{ active: activeTab === 'app' }"
            @click="tabClick('app')"
          >
            APP统计
          </li>
          <li
            :class="{ active: activeTab === 'electric' }"
            @click="tabClick('electric')"
          >
            电量统计
          </li>
        </ul>
      </div>
      <!-- tab切换菜单栏 结束 -->
      <div class="fd-user-box">
        <span class="fd-icon area" @click="$router.push('/areaDistribution')">地域分布</span>
        <span class="fd-icon user fd-ml20">您好，管理员</span>
        <span class="fd-icon exit fd-ml20">退出</span>
      </div>
    </div>
    <!-- 上面logo栏 结束 -->
    <!-- 下面内容部分 开始 -->
    <div class="fd-content-box">
      <router-view></router-view>
    </div>
    <!-- 下面内容部分 结束 -->
  </div>
</template>
<script>
export default {
  name: "index",
  data () {
    return {
      // 激活的tab菜单；app，electric
      activeTab: "app"
    };
  },
  created () {
    console.log(this.$route.name);
    this.activeTab = this.$route.name === "appStatistics" ? "app" : "electric";
  },
  methods: {
    /**
     * 菜单点击事件
     * @params {String} type app，electric
     * */
    tabClick (type) {
      this.activeTab = type;
      const _path = type === "app" ? "appStatistics" : "electricStatistics";
      this.$router.push(_path);
    }
  }
};
</script>
<style lang="less" scoped>
.fd-home-body {
  .fd-header-box {
    .fd-tab-box {
      display: flex;
      flex-grow: 1;
      padding-top: 36px;

      .fd-tab-list {
        margin: 0 auto;
        font-size: 0;
        height: 52px;
        border-radius: 26px;
        border: 3px rgba(0, 120, 255, 0.67) solid;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

        li {
          display: inline-block;
          width: 226px;
          line-height: 46px;
          text-align: center;
          font-size: 24px;
          color: #0078ff;
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }

          &:first-child.active {
            background: rgba(0, 120, 255, 0.4);
            border-top-left-radius: 26px;
            border-bottom-left-radius: 26px;
            color: #fff;
            font-weight: bold;
          }
          &:last-child.active {
            background: rgba(0, 120, 255, 0.4);
            border-top-right-radius: 26px;
            border-bottom-right-radius: 26px;
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }

    .fd-user-box {
      display: flex;
      width: 568px;
      padding-top: 55px;
      text-align: right;
      justify-content: flex-end;

      .fd-icon {
        display: inline-block;
        padding-left: 32px;
        text-align: left;
        font-size: 18px;
        height: 24px;
        color: #0078ff;
        max-width: 280px;
        &.user {
          background: url("@{imgUrl}/common/icon-user.png") left center
            no-repeat;
        }
        &.exit {
          background: url("@{imgUrl}/common/icon-exit.png") left center
            no-repeat;
        }
        &.area {
          background: url("@{imgUrl}/common/icon-area.png") left center
            no-repeat;
            background-size: auto 100% ;
            cursor: pointer;

            &:hover {
              opacity: 0.8;
            }
        }
      }
    }
  }
}
</style>
